<template>
  <div class="phone-verifi">
    <el-form
      :model="state.formParam"
      :rules="state.rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <div class="mb-20">
        <el-form-item label="" prop="user_password">
          <el-input
            v-model="state.formParam.user_password"
            @change="inputpass"
            show-password
            :placeholder="$t('formTip.loginPassTip')"
          ></el-input>
        </el-form-item>
      </div>
      <div class="mb-20">
        <el-form-item label="" prop="user_phone_number">
          <selectCountry
            @selectCountry="choiceCountry"
            :phone="param.user_phone_number"
            @inputPhone="inputPhone"
          />
        </el-form-item>
      </div>
      <div class="mb-50">
        <el-form-item label="" prop="verification_code">
          <sendCode
            ref="sendcode"
            :fond="1"
            @getKey="getKey"
            @inputCode="inputCode"
            :param="state.phoneParam"
          />
        </el-form-item>
      </div>
      <div
        class="btn radius login-btn text-16 share-color text-center"
        @click="confirm"
      >
        {{ $t("formTip.comfirm") }}
      </div>
    </el-form>
  </div>
</template>

<script>
import selectCountry from "@/components/selectCountry/SelectCountry.vue";
import sendCode from "@/components/sendCode/SendCode.vue";
import { reactive, ref } from "vue";
import { safetyVerification } from "@/api/user";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
// import { useStore } from "vuex";

export default {
  name: "phoneFond",
  components: { selectCountry, sendCode },
  props: {
    param: Object
  },
  emits: ["safSuccess"],
  setup(props, { emit }) {
    const { t } = useI18n();
    const state = reactive({
      formParam: { ...props.param, type: "phone" },
      phoneParam: { type: "check", user_password: "" },
      rules: {
        user_phone_number: [
          { required: true, message: t("formTip.phoneTip"), trigger: "blur" }
        ],
        verification_code: [
          { required: true, message: t("formTip.codeTip"), trigger: "blur" }
        ],
        user_password: [
          { required: true, message: t("formTip.passwordTip"), trigger: "blur" }
        ]
      }
    });
    /**
     * methods
     */
    const ruleForm = ref();
    const sendcode = ref();
    // const $store = useStore();
    // 点击确认
    const confirm = () => {
      ruleForm.value.validate(valid => {
        console.log("state.formParam", state.formParam);
        if (valid) {
          safetyVerification(state.formParam)
            .then(res => {
              if (res.code === 200) {
                console.log("yanzheng", res);
                emit("safSuccess", {
                  safety_verification_key: res.data.safety_verification_key
                });
                state.formParam = { ...props.param, type: "phone" };
                sendcode.value.vcode = "";
                sendcode.value.reset();
              }
            })
            .catch(err => {
              ElMessage.error(err.message);
            });
        } else {
          console.log("err");
        }
      });
    };
    // 输入手机号
    const inputPhone = param => {
      state.formParam = Object.assign(state.formParam, param);
    };
    // 发送验证码
    const getKey = key => {
      state.formParam.key = key;
    };
    const inputCode = code => {
      state.formParam.verification_code = code;
    };
    // 输入密码
    const inputpass = val => {
      state.phoneParam.user_password = val;
    };
    const choiceCountry = val => {
      console.log(val);
    };
    return {
      state,
      inputpass,
      ruleForm,
      confirm,
      getKey,
      inputCode,
      inputPhone,
      choiceCountry,
      sendcode
    };
  }
};
</script>

<style scoped lang="less">
.phone-verifi {
  width: 100%;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-50 {
  margin-bottom: 50px;
}
.btn {
  height: 46px;
  line-height: 46px;
}
</style>
